<template>
  <div class="mod-config">
    <div class="ruleContent">
      <div style="height: 500px;">
        <div v-show="getRule" class="ruleCont" v-html="content"></div>
        <div v-show="!getRule">
          <template>
            <script :id="cueId" class="ueditor-box" type="text/plain">{{dataForm.content}}</script>
          </template>
        </div>
      </div>
      <div class="btnGroup">
        <div v-if="getRule">
          <el-button type="primary" @click="ruleModify">修改</el-button>
        </div>
        <div v-else>
          <el-button type="primary" @click="preview">预览</el-button>
          <el-button type="primary" @click="cancelRuleModify">取消</el-button>
          <el-button type="primary" @click="rulePreserve">保存</el-button>
        </div>
      </div>
    </div>
    <div v-if="getContent" class="changeContent">
      <div>积分兑换限制规则：<span>{{ dataForm1.exchageActivityDay || 0 }}</span>天内可兑换<span>{{ dataForm1.exchageActivityCount || 0 }}</span>次</div>
      <div>积分竞拍限制规则：<span>{{ dataForm1.auctionActivityDay || 0 }}</span>天内可竞拍<span>{{ dataForm1.acutionActivityCount || 0 }}</span>次</div>
    </div>
    <div v-else class="changeContent">
      <div>积分兑换限制规则：<el-input type="number" v-model="dataForm1.exchageActivityDay"></el-input>天内可兑换<el-input type="number" v-model="dataForm1.exchageActivityCount"></el-input>次</div>
      <div>积分竞拍限制规则：<el-input type="number" v-model="dataForm1.auctionActivityDay"></el-input>天内可竞拍<el-input type="number" v-model="dataForm1.acutionActivityCount"></el-input>次</div>
    </div>
    <div class="btnGroup">
      <div v-if="getChange">
        <el-button type="primary" @click="changeModify">修改</el-button>
      </div>
      <div v-else>
        <el-button type="primary" @click="cancelChangeModify">取消</el-button>
        <el-button type="primary" @click="changePreserve">保存</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="qrcode" width="30%">
      <div class="qrcode">
        <img :src="qrimg">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ueditor from "ueditor";
  export default {
    data() {
      return {
        content: '',
        getRule: true,
        getChange: true,
        getContent: true,
        dataForm: {},
        dataForm1: {},
        qrcode: false,
        qrimg: '',
        pointActivityRule: {},
        cueId: `J_ueditorBox_${new Date().getTime()}`,
        getQr: ''
      }
    },
    mounted() {
      this.getChangeData()
      this.getRuleData()
      this.$nextTick(()=> {
        this.ue = ueditor.getEditor(this.cueId, {
          // serverUrl: '', // 服务器统一请求接口路径
          zIndex: 3000
        });
      })
    },
    methods: {
      getChangeData() {
        this.$http({
          url: this.$http.adornUrl('/point/pointRule/getPointActivityRule'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataForm1 = data.pointActivityRule
          }
        })
      },
      getRuleData() {
        this.$http({
          url: this.$http.adornUrl('/point/pointRule/getPointRule'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.content = data.pointRule
            this.dataForm.content = data.pointRule
            this.ue.ready(() => {
              this.ue.setContent(this.dataForm.content)
            });
          }
        })
      },
      ruleModify() {
        this.getRule = false
      },
      // 预览
      preview() {
        this.ue.ready(() => {
          this.ueContent = this.ue.getContent();
        });
        // this.getQr = this.ueContent.replace(
        //   /<img/g,
        //   "<img style='width:100%;height:auto'"
        // );
        this.$http({
          url: this.$http.adornUrl("/colorEgg/eggChapter/getQr"),
          method: "post",
          data: this.$http.adornData({
            content: this.ueContent
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.qrcode = true;
            this.qrimg = data.qrUrl;
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      rulePreserve() {
        console.log(this.dataForm)
        this.ue.ready(() => {
          this.dataForm.content = this.ue.getContent().replace(/<img/g, '<img style="width:100%"');
        });
        this.$http({
          url: this.$http.adornUrl('/point/pointRule/updatePointRule'),
          method: 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.cancelRuleModify()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      cancelRuleModify() {
        this.getRuleData()
        this.getRule = true
      },
      // 积分兑换
      changeModify() {
        this.getChange = false
        this.getContent = false
      },
      cancelChangeModify() {
        this.getChangeData()
        this.getChange = true
        this.getContent = true
      },
      changePreserve() {
        this.$http({
          url: this.$http.adornUrl('/point/pointRule/updatePointActivityRule'),
          method: 'post',
          data: this.$http.adornData(this.dataForm1)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.cancelChangeModify()
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mod-config{
    width: 700px;
  }
  .btnGroup{
    margin: 20px;
    display: flex;
    justify-content: center;
  }
  .qrcode {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .qrcode img {
    width: 100%;
    height: 100%;
  }
  .changeContent{
    div{
      margin: 15px 0;
    }
    span{
      margin: 0 10px;
    }
  }
  .el-input{
    width: 70px;
    margin: 0 10px!important;
  }
  .ruleCont{
    overflow: auto;
    height: 500px;
    padding: 30px;
    border: 1px solid #aaa;
  }
</style>
<style>
  .ueditor-box{
    height: 300px;
  }
  .edui-editor{
    z-index: 1000!important;
  }
</style>
